{layout name="layout" /}
<style>
    .result-desc ul li {
        padding: 10px 5px;
    }
</style>
<div class="card" style="margin-top: 8%!important;">
    <div class="card-body">
        <div action="#" class="row" style="width: 80%;margin: auto">
            <div class="form-group col-md-12">
                <div class="input-group m-b-10">
                    <input type="text" class="form-control" id="name" name="name" value=""
                           placeholder="请输入带有http://或者https://的网址" style="height:50px;" autocomplete="off">
                    <span class="input-group-addon" style="background: #ffffff;">
                                        <a href="javascript:;" class="btn btn-dark" onclick="generate()">生成短网址</a>
                                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card result" style="display: none;">
    <div class="card-body">
        <div class="code" style="text-align: center;width:100%;">
            返回数据：
            <code class="result-code">

            </code>
        </div>
        <div class="result-desc" style="text-align: center;width:100%;margin-top: 25px">
            <ul style="list-style: none">
                <li class="origin">
                    <button class="btn btn-xs btn-primary" onclick="copyToClip(this)">复制</button>&nbsp;&nbsp;<strong>原网址：</strong><a
                        href=""></a></li>
                <li class="short">
                    <button class="btn btn-xs btn-primary" onclick="copyToClip(this)">复制</button>&nbsp;&nbsp;<strong>短网址：</strong><a
                        href=""></a></li>
                <li class="expire"><strong>过期时间:</strong> <span class="expire_time"></span></li>
            </ul>
        </div>
    </div>
</div>

<script>
    document.onkeyup = function (e) {
        // 兼容FF和IE和Opera
        var event = e || window.event;
        var key = event.which || event.keyCode || event.charCode;
        if (key == 13) {
            generate()
        }
    };

    function generate() {
        let url = $('input[name="name"]').val();
        if (url == '') {
            lightyear.notify('请输入要转化的网址', 'warning', 1000, '', 'top', 'center')
            return false;
        }
        $.ajax({
            url: '',
            method: 'POST',
            data: {
                url: url,
                time: Date.parse(new Date())
            },
            success: function (res) {
                if (res.code == 200) {
                    $('.result').show();
                    $('.result-code').text(JSON.stringify(res.data));
                    $('.result-desc .origin a').text(res.data.origin)
                    $('.result-desc .origin a').attr('href',res.data.origin)
                    $('.result-desc .short a').text(res.data.short)
                    $('.result-desc .short a').attr('href',res.data.short)
                    $('.result-desc .expire_time').text(new Date(res.data.expire_time*1000).toLocaleString())
                } else {
                    lightyear.notify( res.error, 'warning', 1000, '', 'top', 'center')
                }
            },
            error: function (res) {

            }
        })

    }

    function copyToClip(e){
        var content = $(e).nextAll('a').attr('href');
        var aux = document.createElement("input");
        aux.setAttribute("value", content);
        document.body.appendChild(aux);
        aux.select();
        document.execCommand("copy");
        document.body.removeChild(aux);
        lightyear.notify('内容已复制到剪切板', 'success', 1000, '', 'top', 'center')
    }
</script>
